<template>
  <div class="tool_btn">
    <div class="tool_btn_con">
      <el-button v-for="(item,index) in toolList" :key="index" @click="toolBtnClick(item)" type="primary">
        {{ item.label }}
      </el-button>
    </div>
    <slot name="search"></slot>
  </div>
</template>

<script>
import {ref, reactive, computed, toRefs, watch} from "vue"
import {useRouter} from "vue-router"

export default {
  name: "toolBtn",
  components: {},
  props: {
    toolList: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, context) {
     let {toolList} = reactive(props);
    const toolBtnClick = (currentItem) => {
      context.emit("toolChange", currentItem.id);
    }
    watch(toolList, (old, newVal) => {
      /*console.log("old", old)
      console.log("newVal", newVal)*/
    }, {deep: true,})
    return {
      toolBtnClick
    }
  },
  created() {
  },
  mounted() {
  },

  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.tool_btn {


  background: #fff;
  padding: 5px 20px;
  margin: 5px 0;
  position: relative;

  .tool_btn_con {
    display: flex;
    margin-right: 5px;
  }
}
</style>